<template>
  <div class="sales-analysis">
    <!-- 数据统计 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-title">总销售额</div>
        <div class="stat-value">¥ 2,345,678</div>
        <div class="stat-trend up">↑12%</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">订单总量</div>
        <div class="stat-value">8,923 单</div>
        <div class="stat-trend down">↓3.2%</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">客单价</div>
        <div class="stat-value">¥ 263.5</div>
        <div class="stat-trend up">↑5.6%</div>
      </div>
    </div>

    <!-- 销售趋势（纯CSS实现） -->
    <div class="trend-section">
      <h3>月度销售趋势</h3>
      <div class="trend-chart">
        <div
            v-for="(item, index) in trendData"
            :key="index"
            class="trend-bar"
            :style="{ height: item.height + '%' }"
        >
          <div class="bar-value">{{ item.value }}</div>
        </div>
      </div>
    </div>

    <!-- 品类分布 -->
    <div class="category-distribution">
      <h3>品类销售占比</h3>
      <div class="distribution-bars">
        <div
            v-for="(item, index) in categoryData"
            :key="index"
            class="distribution-item"
        >
          <div class="category-name">{{ item.name }}</div>
          <div class="progress-bar">
            <div
                class="progress-fill"
                :style="{ width: item.percentage + '%', backgroundColor: colors[index] }"
            ></div>
          </div>
          <div class="percentage">{{ item.percentage }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 模拟数据
const trendData = ref([
  { month: '1月', value: 65, height: 45 },
  { month: '2月', value: 59, height: 38 },
  { month: '3月', value: 80, height: 60 },
  { month: '4月', value: 81, height: 62 },
  { month: '5月', value: 56, height: 40 },
  { month: '6月', value: 55, height: 38 }
])

const categoryData = ref([
  { name: '电子产品', percentage: 45 },
  { name: '家居用品', percentage: 30 },
  { name: '服装鞋帽', percentage: 25 }
])

const colors = ref(['#409EFF', '#67C23A', '#E6A23C'])
</script>

<style scoped>
.sales-analysis {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* 数据统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}

.stat-title {
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.stat-trend {
  font-size: 14px;
}

.up { color: #67C23A; }
.down { color: #F56C6C; }

/* 销售趋势图表 */
.trend-section {
  margin-bottom: 32px;
}

.trend-chart {
  display: flex;
  height: 200px;
  align-items: flex-end;
  gap: 20px;
  padding: 20px 0;
}

.trend-bar {
  flex: 1;
  background: #409EFF;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: height 0.5s ease;
}

.bar-value {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 品类分布 */
.distribution-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.category-name {
  width: 100px;
  color: #606266;
}

.progress-bar {
  flex: 1;
  height: 12px;
  background: #f0f0f0;
  border-radius: 6px;
  margin: 0 12px;
}

.progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.percentage {
  width: 50px;
  text-align: right;
  color: #909399;
}
</style>